<template>
  <div>
    <h1>图书管理系统</h1>
    <div style="margin: 30px;">
      <button @click="addNew">新增图书</button>
      <BookEdit
        v-show='dialogVisible'
        :visible.sync='dialogVisible'
        :data='editData'
        @save='save'
      ></BookEdit>
    </div>

    <div>
      <table style='margin: auto; border: solid 1px black;'>
        <tr>
          <th>图书编号</th>
          <th>图书名字</th>
          <th>出版时间</th>
          <th>阅读数</th>
          <th>操作</th>
        </tr>
        <tr
          v-for="(book, index) in books"
          :key="book.id"
        >
          <td>{{book.id}}</td>
          <td>{{book.title}}</td>
          <td>{{book.pub_date}}</td>
          <td>{{book.read}}</td>
          <td>
            <button @click="edit(index)">修改</button>
            <button @click="del(index)">删除</button>
          </td>
        </tr>
      </table>
    </div>

  </div>
</template>

<script>
import { getBookList, addBook, editBook, delBook} from '@/components/axios_api/api'
import BookEdit from '@/views/bookedit'
export default {
  components: {
    BookEdit
  },
  data() {
    return {
      dialogVisible: false,
      books: [
        { id: 3, btitle: "...", bpub_date: "2020-08-11", bread: 100, bcomment: 50 }
      ],
      editData: {  // 编辑的内容
        btitle: "",
        bpub_date: "",
        bread: 0,
        bcomment: 0
      }
    }
  },
  methods: {
    // 1.点击新增图书时初始化数据
    addNew() {
      this.editData = {  // 初始化 编辑内容
        btitle: "",
        bpub_date: "",
        bread: 100,
        bcomment: 0
      }
      this.dialogVisible = true  // 显示弹框
    },

    // 2.获取图书列表
    get() {
      getBookList().then((data) => {
        console.log(data)
        // books: [{btitle: "西游记", bpub_date: "2020-08-11", bread: 100, bcomment: 50}]
        this.books = data.data
      })
    },

    // 3.修改或者添加图书
    save() {
      // 根据editData中的id判断是更新还是新增
    //   debugger
      console.log(this.editData)
      if (this.editData.id) {
        // 如果有id, 修改图书
        // 修改请求
        let params = this.editData
        editBook(params).then((res)=>{
          console.log(res)
          this.get()
        })
      } else {
        // 增加图书
        addBook(this.editData).then((res) => {
          this.get()
        })
      }
    },

    // 点击修改弹出修改页面
    edit(index) {
      this.editData = JSON.parse(JSON.stringify(this.books[index]))  // 复制 this.books[index] 的数据
      // this.editData = this.books[index]  //
      this.dialogVisible = true
    },

    // 删除
    del(index) {
      let params = {
        id: this.books[index].id
      }
      delBook(params).then((res)=>{
        console.log(res)
        this.get()
      })
    }
  },
  created() {
    this.get()
  }
}
</script>
<style>
table tr td {
  width: 150px;
  border: solid 1px black;
}
</style>